<!DOCTYPE html>
<html>
<head>
  <title>F-1 Feeder</title>
  <!--
  <link href="css/bootstrap_include.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/buttons.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/navs.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/font-awesome.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/search.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/form_elements.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/layout.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/breadcrumbs.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/badges.css" media="screen" rel="stylesheet" type="text/css" />

  <link href="css/tables.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/base.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/fixes.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/typography.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/widgets/avatar.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/docs.css" media="screen" rel="stylesheet" type="text/css" />

  <link href="css/responsive-max1024.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/res
  ponsive-max768.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="css/responsive-max480.css" media="screen" rel="stylesheet" type="text/css" />
-->
  <style type="text/css">
body{
  <!--background-image:url(img/black.jpg);-->
  background-color:rgba(255,255,0,1);
}
table{
background-color:rgba(0,0,0,0);
}
table, td, th
  {
  border:1px solid green;
  }

th
  {
  background-color:green;
  color:white;  <script src="lib/angular/angular.min.js"></script>

  }
</style>

  <script src="lib/angular/angular-route.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
  <script type="text/javascript" src="js/services.js"></script>
</head>
<body ng-app="F1FeederApp" ng-controller="driversController">



  <input type="text" ng-model="nameFilter" placeholder="Search..."/>
  <table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr style="height:20 width:40 color:sienna" ><td>Index</td><td>Name</td><td>Contructors</td><td>Point</td></tr>
      <tr ng-repeat="driver in driversList | filter: nameFilter">
      
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/{{driver.nationality}}.jpg"  height="20" width="40"></img>
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
